<template>
  <div class="">
    <el-form inline>
      <el-form-item :label="lable">
        <el-select v-model="tableName" placeholder="请选择" @change="getTableColList" >
          <el-option
              v-for="item in tableNameData"
              :key="item.value"
              :label="item.value"
              :value="item.value">
            <span style="float: left">{{ item.value }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.label }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="页面展示名:" v-if="showName">
        <el-input v-model="tableComment" @change="changeTableName"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {get} from "../util/http";
import {message} from "../util/notice";

export default {
  name: 'TableFromHeader',
  props:{
    lable: {
      type: String,
      default: "表名称"
    },
    showName: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      random: '',
      tableNameData: [],
      tableName: '',
      tableComment: ''
    }
  },
  mounted() {
    let random = localStorage.getItem("random");
    if (!random) {
      message("数据库连接信息有误,请重新配置", "error");
      this.goHome();
      return;
    }
    this.random = random;
    this.getAllTable();
  },
  methods: {
    getTableColList() {
      var url = "/db/getTableColList/" + this.tableName + "/" + this.random;
      get(url).then(res => {
        if (res) {
          var name = this.tableName;
          this.$emit("changeColData", {res,name});
        }
      })
    },
    changeTableName(){
      var name = this.tableComment;
      this.$emit("changeTableName", {name});
    },
    goHome() {
      this.$router.push("/");
    },
    getAllTable() {
      var url = "/db/getAllTable/" + this.random;
      get(url).then(res => {
        var arr = res;
        if (arr && arr.length > 0) {
          var tableNameArr = [];
          for (var i = 0; i < arr.length; i++) {
            var param = {};
            param.value = arr[i];
            param.label = "未配置";
            tableNameArr.push(param);
          }
          this.tableNameData = tableNameArr;
        }
      })
    }

  }
}
</script>

<style scoped>

</style>
